<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LoveCalci</title>
    <link rel="stylesheet" href="style.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Lobster&family=Montserrat:wght@100;300;500&family=Open+Sans:wght@300;400;600&family=Poppins:wght@100;300;500&family=Roboto:wght@100;300;700&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="popup">
        <img class="gif" src="giphy.gif" alt="">
        <p class="cross">&#9747</p>
        <h1>Your love strength is:-</h1>
        <h1 class="result"></h1>
    </div>
        <div class="container">
            <h1>Let's check the power of your <span class="heart">❤️</span>.</h1>
            <p class="yourname">Your Name</p>
            <input type="text" placeholder="Enter your name" name="myname" id="myname">
            <p class="crushname">Your Crush Name</p>
            <input type="text" placeholder="Enter your crush name" name="crushname" id="crushname">
            <button id="submit">Calculate your love strength💪</button>
        </div>
    <script src="app.js">
    </script>
</body>

</html>